<template>
  <div id="myChart2" :style="{width: '485px', height: '255px'}"></div>
</template>

<script>
import echarts from "echarts";
import Axios from "@/common/js/Axios";
export default {
  mounted() {
    this.drawLine();
  },
  data() {
    return {
      code: localStorage.getItem("bugCode"),
      tmpx: [],
      tmpy: [],
      data0:"",
      data: {
        // 绘图区距离四周的距离
        grid: {
          top: "8%",
          left: "8%",
          right: "10%",
          bottom: "10%"
        },
        title: {
          // text: "上证指数",
          left: 0
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          // data: ["日K", "MA5", "MA10", "MA20", "MA30"]
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%"
        },
        xAxis: {
          type: "category",
          // data: this.data0.categoryData,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          splitNumber: 20,
          min: "dataMin",
          max: "dataMax"
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 50,
            end: 100
          },
          {
            show: false,
            type: "slider",
            y: "90%",
            start: 50,
            end: 100
          }
        ],
        series: [
          {
            name: "日K",
            type: "candlestick",
            // data: this.data0.values,
            itemStyle: {
              normal: {
                // color: upColor,
                // color0: downColor,
                // borderColor: upBorderColor,
                // borderColor0: downBorderColor
              }
            },
            markPoint: {
              label: {
                normal: {
                  formatter: function(param) {
                    return param != null ? Math.round(param.value) : "";
                  }
                }
              },
              data: [
                {
                  name: "XX标点",
                  coord: ["2013/5/31", 2300],
                  value: 2300,
                  itemStyle: {
                    normal: { color: "rgb(41,60,85)" }
                  }
                },
                {
                  name: "highest value",
                  type: "max",
                  valueDim: "highest"
                },
                {
                  name: "lowest value",
                  type: "min",
                  valueDim: "lowest"
                },
                {
                  name: "average value on close",
                  type: "average",
                  valueDim: "close"
                }
              ],
              tooltip: {
                formatter: function(param) {
                  return param.name + "<br>" + (param.data.coord || "");
                }
              }
            },
            markLine: {
              symbol: ["none", "none"],
              data: [
                [
                  {
                    name: "from lowest to highest",
                    type: "min",
                    valueDim: "lowest",
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                      normal: { show: false },
                      emphasis: { show: false }
                    }
                  },
                  {
                    type: "max",
                    valueDim: "highest",
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                      normal: { show: false },
                      emphasis: { show: false }
                    }
                  }
                ],
                {
                  name: "min line on close",
                  type: "min",
                  valueDim: "close"
                },
                {
                  name: "max line on close",
                  type: "max",
                  valueDim: "close"
                }
              ]
            }
          },
          {
            name: "MA5",
            type: "line",
            // data: this.calculateMA(5),
            smooth: true,
            lineStyle: {
              normal: { opacity: 0.5 }
            }
          },
          {
            name: "MA10",
            type: "line",
            // data: this.calculateMA(10),
            smooth: true,
            lineStyle: {
              normal: { opacity: 0.5 }
            }
          },
          {
            name: "MA20",
            type: "line",
            // data: this.calculateMA(20),
            smooth: true,
            lineStyle: {
              normal: { opacity: 0.5 }
            }
          },
          {
            name: "MA30",
            type: "line",
            // data: this.calculateMA(30),
            smooth: true,
            lineStyle: {
              normal: { opacity: 0.5 }
            }
          }
        ]
      }
    };
  },
  methods: {
    //echarts分割数据
    splitData(rawData) {
      var categoryData = [];
      var values = [];
      for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
      }
      return {
        categoryData: categoryData,
        values: values
      };
    },
    //echarts计算MA
    calculateMA(dayCount) {
      var result = [];
      for (var i = 0, len = this.data0.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += this.data0.values[i - j][1];
        }
        result.push(sum / dayCount);
      }
      return result;
    },
    async drawLine() {
      let upColor = "#ec0000";
      let upBorderColor = "#8A0000";
      let downColor = "#00da3c";
      let downBorderColor = "#008F28";
      let colors={
        color: upColor,
        color0: downColor,
        borderColor: upBorderColor,
        borderColor0: downBorderColor
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart2"));
      await Axios.getAxios("/api/stock/kline/daily/" + this.code, {}, {}).then(
        res => {          
          this.data0 = this.splitData(res.data);
          this.data.xAxis.data = this.data0.categoryData;
          this.data.series[0].data = this.data0.values;
          this.data.series[1].data = this.calculateMA(5);
          this.data.series[1].data = this.calculateMA(10);
          this.data.series[1].data = this.calculateMA(20);
          this.data.series[1].data = this.calculateMA(30);        
          this.data.series[0].itemStyle.normal = colors;
        }
      );
      // 绘制图表
      myChart.setOption(this.data);
    }
  }
};
</script>

<style>
</style>
